<template>
    <div class="wrapper">
        <!--头部-->
        <header>
            <div class=location-text><i class="fa fa-map-marker"></i>{{ Location }}<i class="fa fa-caret-down"></i>
            </div>
        </header>
        <!--搜索框部分-->
        <div class="search">
            <div class="fixxed" @click="toSearch" ref="fixxedbox">
                <div class="search-box">
                    <i class="fa fa-search"></i>搜索饿了么商家、商品名称
                </div>
            </div>
        </div>
        <!--点餐分类部分-->
        <ul class="foodtype">
            <li @click="toBusinessList(1)">
                <img src="../assets/foodtype1.jpg">
                <p>美食</p>
            </li>
            <li @click="toBusinessList(2)">
                <img src="../assets/foodtype2.jpg">
                <p>早餐</p>
            </li>
            <li @click="toBusinessList(3)">
                <img src="../assets/foodtype3.jpg">
                <p>跑腿代购</p>
            </li>
            <li @click="toBusinessList(4)">
                <img src="../assets/foodtype4.jpg">
                <p>汉堡披萨</p>
            </li>
            <li @click="toBusinessList(5)">
                <img src="../assets/foodtype5.jpg">
                <p>甜品饮品</p>
            </li>
            <li @click="toBusinessList(6)">
                <img src="../assets/foodtype6.jpg">
                <p>素食简餐</p>
            </li>
            <li @click="toBusinessList(7)">
                <img src="../assets/foodtype7.jpg">
                <p>地方小吃</p>
            </li>
            <li @click="toBusinessList(8)">
                <img src="../assets/foodtype8.jpg">
                <p>米粉面馆</p>
            </li>
            <li @click="toBusinessList(9)">
                <img src="../assets/foodtype9.jpg">
                <p>包子粥铺</p>
            </li>
            <li @click="toBusinessList(10)">
                <img src="../assets/foodtype10.jpg">
                <p>炸鸡炸串</p>
            </li>
        </ul>
        <!--横幅广告-->
        <div class="banner">
            <h3>品质套餐</h3>
            <p>搭配齐全，吃得好</p>
            <a>立即抢购 &gt;</a>
        </div>
        <!--超级会员-->
        <div class="supermember">
            <div class="left">
                <img src="../assets/supermember.jpg">
                <h3>超级会员</h3>
                <p>&#8226 每月享超值权益</p>
            </div>
            <div class="right">
                立即开通 &gt
            </div>
        </div>
        <!--推荐商家-->
        <div class="recommend">
            <div class="recommend-line"></div>
            <p>推荐商家</p>
            <div class="recommend-line"></div>
        </div>
        <!--推荐方式-->
        <ul class="recommend-style">
            <li>综合排序<i class="fa fa-caret-down"></i></li>
            <li>距离最近</li>
            <li>销量最高</li>
            <li>筛选<i class="fa fa-fliter"></i></li>
        </ul>
        <!--推荐商家列表-->
        <ul class="business">
            <li>
                <img src="../assets/business1.png">
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>果萌鲜果捞&#8226果切</h3>
                        <div class="business-info-like">&#8226;</div>
                    </div>
                    <div class="business-info-star">
                        <div class="left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.7 月售133单</p>
                        </div>
                        <div class="right">蜂鸟专送</div>
                    </div>
                    <div class="business-info-delivery">
                        <p>&#165;0起送 | &#165;0配送</p>
                        <p>906m | 56分钟</p>
                    </div>
                    <div class="business-info-explain">
                        <div>热销：水果捞</div>
                    </div>
                    <div class="business-info-promotion">
                        <div class="left">
                            <div class="icon">新</div>
                            <p>新客-1</p>
                        </div>
                        <div class="right">
                            <p>两个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="business-info-promotion">
                        <div class="left">
                            <div class="icon" style="background-color: #F1884F;">特</div>
                            <p>特价商品6.33折起</p>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <img src="../assets/business2.png">
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>肯德基宅急送&#40天津大学店&#41</h3>
                        <div class="business-info-like">&#8226;</div>
                    </div>
                    <div class="business-info-star">
                        <div class="left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>5.0 月售232单</p>
                        </div>
                        <div class="right">蜂鸟专送</div>
                    </div>
                    <div class="business-info-delivery">
                        <p>&#165;0起送 | &#165;6配送</p>
                        <p>945m | 30分钟</p>
                    </div>
                    <div class="business-info-promotion-1">
                        <div class="secondline">7.5元无门槛红包</div>
                    </div>
                </div>
            </li>
            <li>
                <img src="../assets/business3.png">
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>乐克炸鸡汉堡</h3>
                        <div class="business-info-like">&#8226;</div>
                    </div>
                    <div class="business-info-star">
                        <div class="left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.7 月售2975单</p>
                        </div>
                        <div class="right">蜂鸟专送</div>
                    </div>
                    <div class="business-info-delivery">
                        <p>&#165;16起送 | &#165;1.8配送</p>
                        <p>5.7km | 50分钟</p>
                    </div>
                    <div class="business-info-promotion-1">
                        <div class="secondline">鸡腿堡鲜辣多汁</div>
                        <div class="secondline">近期2669人下单</div>
                    </div>
                </div>
            </li>
            <li>
                <img src="../assets/business4.png">
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>饭有引力</h3>
                        <div class="business-info-like">&#8226;</div>
                    </div>
                    <div class="business-info-star">
                        <div class="left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.6 月售1737单</p>
                        </div>
                        <div class="right">蜂鸟专送</div>
                    </div>
                    <div class="business-info-delivery">
                        <p>&#165;15起送 | &#165;3.3配送</p>
                        <p>1.4km | 40分钟</p>
                    </div>
                    <div class="business-info-explain">
                        <div>热销：鱼香肉丝</div>
                    </div>
                    <div class="business-info-promotion-1">
                        <div class="secondline">清补凉清热解暑</div>
                    </div>
                </div>
            </li>
            <li>
                <img src="../assets/business5.png">
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>麦瑞堡·汉堡</h3>
                        <div class="business-info-like">&#8226;</div>
                    </div>
                    <div class="business-info-star">
                        <div class="left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.2 月售276单</p>
                        </div>
                        <div class="right">蜂鸟专送</div>
                    </div>
                    <div class="business-info-delivery">
                        <p>&#165;15起送 | &#165;2.3配送</p>
                        <p>1.4km | 40分钟</p>
                    </div>
                    <div class="business-info-promotion-1">
                        <div class="secondline">有吃有喝感觉很不错</div>
                        <div class="secondline">口味好评率92%</div>
                    </div>
                </div>
            </li>
        </ul>
        <!--底部菜单-->
        <Footer></Footer>
    </div>
</template>

<script>
//导入共通组件
import Footer from '../components/Footer.vue';
import {useRouter} from 'vue-router'

let router

export default {
    name: "Index",
    data() {
        return {
            Location: '正在定位中...'
        }
    },
    created() {
        router = useRouter()
        this.getLocation();
    },
    mounted() {
        document.onscroll = () => {
            //获取滚动条位置
            let s1 = document.documentElement.scrollTop;
            let s2 = document.body.scrollTop;
            let scroll = s1 === 0 ? s2 : s1;
            //获取视口宽度
            let width = document.documentElement.clientWidth;
            //获取顶部固定块
            let search = this.$refs.fixxedbox;
            //判断滚动条位置超过视口宽度的12%，搜索块变为固定定位
            if (scroll > width * 0.12) {
                search.style.position = 'fixed';
                search.style.left = 0;
                search.style.top = 0;
            } else {
                search.style.position = 'static'
            }
        }
    },
    //当切换到其他组件时就不需要document滚动条事件了
    destroyed() {
        document.onscroll = null;
    },
    components: {
        Footer
    },
    methods: {
        //跳转到搜索页面
        toSearch() {
            this.$router.push({path: '/search'});
            //让页面回到顶部
            window.scrollTo(0, 0);
        },
        //用IP获取地址
        getLngLatLocation() {
            var that = this;
            AMap.plugin('AMap.CitySearch', function () {
                var citySearch = new AMap.CitySearch();
                citySearch.getLocalCity(function (status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        // 查询成功，result即为当前所在城市信息
                        AMap.plugin('AMap.Geocoder', function () {
                            var geocoder = new AMap.Geocoder({
                                // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                                city: result.adcode
                            })

                            var lnglat = result.rectangle.split(";")[0].split(",");

                            geocoder.getAddress(lnglat, function (status, data) {
                                if (status === 'complete' && result.info === 'OK') {
                                    // result为对应的地理位置详细信息
                                    that.Location = data.regeocode.formattedAddress;
                                }
                            })
                        })
                    }
                })
            })
        },
        //用浏览器功能获取经纬度，用高德API逆解析经纬度得到地址，如果获取经纬度失败，用IP获得地址
        getLocation() {
            const that = this;
            AMap.plugin('AMap.Geolocation', function () {
                var geolocation = new AMap.Geolocation({
                    // 是否使用高精度定位，默认：true
                    enableHighAccuracy: true,
                    // 设置定位超时时间，默认：无穷大
                    timeout: 10000,
                })

                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', onComplete);
                AMap.event.addListener(geolocation, 'error', onError);

                function onComplete(data) {
                    // data是具体的定位信息
                    that.Location = data.formattedAddress;
                }

                function onError(data) {
                    // 定位出错
                    that.getLngLatLocation();
                }
            })
        },
        //跳转到businessList
        toBusinessList(orderTypeId) {
            router.push({name: 'BusinessList', query: {orderTypeId}})
        }
    }
}
</script>

<style scoped>
/**************************总容器**************************/
.wrapper {
    width: 100%;
    height: 100%;
}

/**************************header**************************/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097ff;
    display: flex;
    align-items: center;
}

.wrapper header .location-text .fa-map-marker {
    margin: 0 1vw 0 3vw;
}

.wrapper header .location-text {
    font-size: 4.5vw;
    font-weight: 700;
    color: #fff;
}

.wrapper header .location-text .fa-caret-down {
    margin: 0 0 0 1vw;
}

/**************************search**************************/
.wrapper .search {
    width: 100%;
    height: 13vw;
}

.wrapper .search .fixxed {
    width: 100%;
    height: 13vw;
    background-color: #0097ff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper .search .fixxed .search-box {
    background-color: #fff;
    width: 90%;
    height: 9vw;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5vw;
    color: #AEAEAE;
    font-family: "宋体";
    /*此样式让文本选中状态无效*/
    user-select: none;
}

.wrapper .search .fixxed .search-box .fa-search {
    margin-right: 1vw;
}

/**************************点餐分类**************************/
.wrapper .foodtype {
    width: 100%;
    height: 48vw;

    display: flex;
    flex-wrap: wrap;

    justify-content: space-around;
    align-content: center;
}

.wrapper .foodtype li {
    width: 18vw;
    height: 20vw;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    user-select: none;
    cursor: pointer;
}

.wrapper .foodtype li img {
    width: 12vw;
    height: 12vw;
}

.wrapper .foodtype li p {
    font-size: 3.2vw;
    color: #666;
}

/**************************横幅广告**************************/

.wrapper .banner {
    width: 95%;
    margin: 0 auto;
    height: 29vw;

    background-image: url(../assets/indexbanner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    box-sizing: border-box;
    padding: 2vw 6vw;
}

.wrapper .banner h3 {
    font-size: 4.2vw;
    margin-bottom: 1.2vw;
}

.wrapper .banner p {
    font-size: 3.4vw;
    color: #666;
    margin-bottom: 2.4vw;
}

.wrapper .banner a {
    font-size: 3vw;
    color: #C79060;
    font-weight: 700;
}

/**************************超级会员**************************/
.wrapper .supermember {
    width: 95%;
    margin: 0 auto;
    height: 11.5vw;
    background-color: #FEECD1;
    margin-top: 1.3vw;
    border-radius: 2px;
    color: #644F1B;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .supermember .left {
    display: flex;
    align-items: center;
    margin-left: 4vw;
    user-select: none;
}

.wrapper .supermember .left img {
    width: 6vw;
    height: 6vw;
    margin-right: 2vw;
}

.wrapper .supermember .left h3 {
    font-size: 4vw;
    margin-right: 2vw;
}

.wrapper .supermember .left p {
    font-size: 3vw;
}

.wrapper .supermember .right {
    font-size: 3vw;
    margin-right: 4vw;
    cursor: pointer;
}

/**************************推荐商家**************************/
.wrapper .recommend {
    width: 100%;
    height: 14vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper .recommend .recommend-line {
    width: 6vw;
    height: 0.2vw;
    background-color: #888;
}

.wrapper .recommend p {
    font-size: 4vw;
    margin: 0 4vw;
}

/**************************推荐方式部分**************************/
.wrapper .recommend-style {
    width: 100%;
    height: 5vw;
    margin-bottom: 5vw;

    display: flex;
    justify-content: space-around;
    align-items: center;
}

.wrapper .recommend-style li {
    font-size: 3.5vw;
    color: #555;
}

/**************************推荐商家部分**************************/
.wrapper .business {
    width: 100%;
}

.wrapper .business li {
    width: 100%;
    box-sizing: border-box;
    padding: 2.5vw;
    user-select: none;
    border-bottom: solid 1px #DDD;

    display: flex;
}

.wrapper .business li img {
    width: 18vw;
    height: 18vw;
}

.wrapper .business li .business-info {
    width: 100%;
    box-sizing: border-box;
    padding-left: 3vw;
}

.wrapper .business li .business-info .business-info-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;
}

.wrapper .business li .business-info .business-info-h h3 {
    font-size: 4vw;
    color: #333;
}

.wrapper .business li .business-info .business-info-h .business-info-like {
    width: 1.6vw;
    height: 3.4vw;
    background-color: #666;
    color: #fff;
    font-size: 4vw;
    margin-right: 4vw;

    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper .business li .business-info .business-info-star {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 3.1vw;
    margin-bottom: 2vw;
}

.wrapper .business li .business-info .business-info-star .left {
    display: flex;
    align-items: center;
}

.wrapper .business li .business-info .business-info-star .left .fa-star {
    color: #FEC80E;
    margin-right: 0.5vw;
}

.wrapper .business li .business-info .business-info-star .left p {
    color: #666;
    margin-left: 1vw;
}

.wrapper .business li .business-info .business-info-star .right {
    background-color: #0097FF;
    color: #fff;
    font-size: 2.4vw;
    border-radius: 2px;
    padding: 0 0.6vw;
}


.wrapper .business li .business-info .business-info-delivery {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;
    color: #666;
    font-size: 3.1vw;
}

.wrapper .business li .business-info .business-info-explain {
    display: flex;
    align-items: center;
    margin-bottom: 3vw;
}

.wrapper .business li .business-info .business-info-explain div {
    border: solid 1px #DDD;
    font-size: 2.8vw;
    color: #666;
    border-radius: 3px;
    padding: 0 0.1vw;
}

.wrapper .business li .business-info .business-info-promotion-1 {
    display: flex;
    align-items: center;
    margin-bottom: 1.8vw;
}

.wrapper .business li .business-info .business-info-promotion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.8vw;
}

.wrapper .business li .business-info .business-info-promotion-1 .secondline {
    font-size: 1.6vw;
    background-color: #FEC80E;
    color: #333333;
    border-radius: 3px;
    margin: 0 1vw;
}

.wrapper .business li .business-info .business-info-promotion .oneline {
    font-size: 1.6vw;
    background-color: #FEC80E;
    color: #333333;
    border-radius: 3px;
    padding: 0 1vw;
}

.wrapper .business li .business-info .business-info-promotion .left {
    display: flex;
    align-items: center;
}

.wrapper .business li .business-info .business-info-promotion .left .icon {
    width: 4vw;
    height: 4vw;
    background-color: #70BC46;
    border-radius: 3px;
    font-size: 3vw;
    color: #fff;
    padding: 0 0.6vw;

    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper .business li .business-info .business-info-promotion .left p {
    color: #666;
    font-size: 3vw;
    margin-left: 2vw;
}

.wrapper .business li .business-info .business-info-promotion .right {
    display: flex;
    align-items: center;
    font-size: 2.5vw;
    color: #999;
}

.wrapper .business li .business-info .business-info-promotion .right p {
    margin-right: 2vw;
}
</style>